﻿<UserControl x:Class="UI.LoadingIndicator"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:UI"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    d:DesignHeight="4" d:DesignWidth="100">

    <UserControl.Resources>
        <local:XConverter x:Key="XConverter" />
        <ExponentialEase EasingMode="EaseOut" Exponent="1" x:Key="LoadingEaseOut"/>
        <ExponentialEase EasingMode="EaseIn" Exponent="1" x:Key="LoadingEaseIn"/>

        <Storyboard x:Key="LoadingAnimation" Duration="00:00:04.4" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="X" Storyboard.TargetName="R1TT">
                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.33}" EasingFunction="{StaticResource LoadingEaseOut}"/>
                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.66}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=1}" EasingFunction="{StaticResource LoadingEaseIn}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">
                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.33}" EasingFunction="{StaticResource LoadingEaseOut}"/>
                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.66}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=1}" EasingFunction="{StaticResource LoadingEaseIn}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">
                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.33}" EasingFunction="{StaticResource LoadingEaseOut}"/>
                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.66}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=1}" EasingFunction="{StaticResource LoadingEaseIn}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">
                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.33}" EasingFunction="{StaticResource LoadingEaseOut}"/>
                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.66}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=1}" EasingFunction="{StaticResource LoadingEaseIn}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">
                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.33}" EasingFunction="{StaticResource LoadingEaseOut}"/>
                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=0.66}"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="{Binding Path=ActualWidth, Converter={StaticResource XConverter}, ConverterParameter=1}" EasingFunction="{StaticResource LoadingEaseIn}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R1">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R2">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R3">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R4">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R5">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" HorizontalAlignment="Left">
        <Rectangle Fill="{StaticResource PhoneAccentBrush}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R1" Opacity="0" CacheMode="BitmapCache">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="R1TT"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Fill="{StaticResource PhoneAccentBrush}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R2" Opacity="0" CacheMode="BitmapCache">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="R2TT"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Fill="{StaticResource PhoneAccentBrush}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R3" Opacity="0" CacheMode="BitmapCache">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="R3TT"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Fill="{StaticResource PhoneAccentBrush}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R4" Opacity="0" CacheMode="BitmapCache">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="R4TT"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Fill="{StaticResource PhoneAccentBrush}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R5" Opacity="0" CacheMode="BitmapCache">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="R5TT"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</UserControl>
